import React, { FC } from 'react';
import { View, Text } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { Button } from 'antd-mobile';
export interface IProps extends ICompProps {
    isActiveConfirmBtn?: boolean;
    cancel?: () => void;
    confirm?: () => void;
}
Header.defaultProps = {
    isActiveConfirmBtn: true,
} as Partial<IProps>;
function Header(props: IProps) {
    const { className, style, isActiveConfirmBtn, cancel, confirm } = props;
    const localClassName = useClassName('Header', className);
    return (
        <RootView className={localClassName} style={style}>
            <View className="header_Wrap">
                <Text className="cancel" onClick={cancel}>
                    取消
                </Text>
                <Button
                    className="confirmBtn"
                    style={{ backgroundColor: isActiveConfirmBtn ? '#ff8828' : '#808a9d' }}
                    onClick={confirm}>
                    完成
                </Button>
            </View>
        </RootView>
    );
}
export default React.memo(Header as FC<IProps>);
const RootView = styled(View)`
    &.Header {
        .header_Wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            .cancel {
                color: #808a9d;
                font-size: 32px;
                letter-spacing: 4px;
            }
            .confirmBtn {
                width: 110px;
                border-radius: 16px;

                color: #fff;
                letter-spacing: 4px;
            }
        }
    }
`;
